<template>
	<view style="margin-top: 15%;" class="p40">
		<view style="text-align: center; padding-top: 10%;">
			<image src="/static/logo.png" mode="widthFix" class="logo"></image>
			<view style="font-size: 22px; line-height:40px;">SCP协作平台</view>
		</view>

		<view style="text-align: center; margin-top: 15%;padding:10px 20px;">
			<view>
				<u-form ref="uForm" v-model="formData" label-width="70px">

					<!-- #ifdef MP-WEIXIN -->
					<u-form-item prop="mobile" label="手机号" v-if="type=='reg'">
						<u-input v-model="formData.mobile" border="bottom" type="number" placeholder="请输入手机号"></u-input>
					</u-form-item>

					<u-form-item prop="nickname" label="昵称" v-if="type=='reg'">
						<u-input type="nickname" placeholder="昵称" border="bottom" v-model="formData.nickname"></u-input>
					</u-form-item>
					<!-- #endif -->

					<!-- #ifdef H5 -->
					<u-form-item prop="mobile" label="手机号" v-if="type=='reg'">
						<u-input v-model="formData.mobile" border="bottom" type="number" placeholder="请输入手机号"></u-input>
					</u-form-item>

					<u-form-item prop="mobile" label="密码" v-if="type=='reg'">
						<u-input v-model="formData.password" border="bottom" :type="showPassword? '':'password'"
							placeholder="由数字,字母组成,不低于6位">
							<template slot="suffix">
								<u-icon :name="showPassword? 'eye':'eye-off'"
									@click="showPassword=!showPassword"></u-icon>
							</template></u-input>
					</u-form-item>

					<!-- #endif -->

					<u-form-item v-if="type=='reg'">
						<u-button type="primary" shape="circle" @click="handleRegUser">立即注册</u-button>
					</u-form-item>
				</u-form>

				<view style="margin-top: 15%; text-align: right;" v-if="type=='reg'">
					<text type="text" @click="type='login'">有账号，去登录</text>
				</view>
			</view>
		</view>


		<view v-if="type=='login'" style="padding:0px 20px;">
			<u-form ref="loginForm" labelWidth="70px">
				<view style="justify-content: center;">
					<!-- #ifdef H5 -->
					<u-gap height="30%"></u-gap>
					<u-form-item label="手机号">
						<u-input placeholder="手机号" v-model="formData.mobile" border="bottom"></u-input>
					</u-form-item>
					<u-form-item label="密码">
						<u-input placeholder="登录密码" :type="showPassword? '':'password'" v-model="formData.password"
							border="bottom">
							<template slot="suffix">
								<u-icon :name="showPassword? 'eye':'eye-off'"
									@click="showPassword=!showPassword"></u-icon>
							</template>
						</u-input>
					</u-form-item>

					<u-form-item>
						<u-button type="primary" shape="circle" @click="handleMobileLogin">立即登录</u-button>
					</u-form-item>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<view style="margin: 10px;">
						<u-button type="success" shape="circle" @click="handleWxLogin">微信一键登录</u-button>
					</view>
					<!-- #endif -->
				</view>
			</u-form>
			<view style="margin-top: 15%; text-align: right;">
				<view  @click="handleGotoReg">还没有账号?</view>
			</view>
		</view>


		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		post
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				type: "login",
				showPassword: false,
				formData: {
					mobile: '',
					password: '',
				},
				rules: {
					"mobile": [{
						required: true,
						message: "手机号码不能为空",
						trigger: "blur"
					}]
				}
			}
		},
		mounted() {
			if(uni.getStorageSync("mobile")!=""){
				this.formData.mobile=uni.getStorageSync("mobile");
			}
			if(uni.getStorageSync("token")!="" && uni.getStorageSync("userinfo")!=null){
				//console.log("已经登录");
				//已经登录过，自动跳转
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			handleRegUser() {
				// #ifdef H5
				if (this.formData.mobile == "") {
					this.$refs.uToast.show({
						message: "手机号不能为空!",
						type: "error"
					});
					return;
				} else if (this.formData.password == "") {
					this.$refs.uToast.show({
						message: "密码不能为空!",
						type: "error"
					});
					return;
				}
				const params={
					mobile:this.formData.mobile,
					password:this.formData.password
				}
				
				post("/user/reg", params).then(res => {
					if(res.statusCode==200 && res.data.code==1){
						this.$refs.uToast.show({
							message: res.data.msg,
							type: "success",
							duration:3000
						});
					}else{
						this.$refs.uToast.show({
							message: res.data.msg,
							type: "error",
							duration:3000
						});
					}
				});
				// #endif
				
				
				// #ifdef MP-WEIXIN
				if (this.formData.mobile == "") {
					this.$refs.uToast.show({
						message: "手机号不能为空!",
						type: "error"
					});
					return;
				} else if (this.formData.nickname == "") {
					this.$refs.uToast.show({
						message: "昵称不能为空!",
						type: "error"
					});
					return;
				}
				
				var _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var params = {
							code: loginRes.code,
							mobile: _this.formData.mobile,
							nickname: _this.formData.nickname
						}
				
						post("/user/wxreg", params).then(lres => {
							console.log(lres);
							if (lres.statusCode == 200) {
								if (lres.data.code == 1) {
									_this.$refs.uToast.show({
										message: lres.data.msg,
										type: "warnning"
									});
								} else {
									_this.$refs.uToast.show({
										message: lres.data.msg,
										type: "error",
										duration:3000
									});
								}
							} else {
								_this.$refs.uToast.show({
									message: lres.data.msg,
									type: "error"
								});
							}
						});
					}
				});
				// #endif
			},
			handleGotoReg() {
				this.type = "reg";

			},
			handleWxLogin() {
				var _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var params = {
							code: loginRes.code
						}
						post("/user/wxlogin", params).then(lres => {
							if (lres.statusCode == 200) {
								if (lres.data.code == 1) {
									_this.$refs.uToast.show({
										type: 'success',
										title: '登录成功',
										message: "登录成功!"
									});

									uni.setStorageSync("h5userinfo", lres.data.userinfo);
									uni.setStorageSync("h5token", lres.data.token);
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							}
							if (lres.code == 1) {

							}
						});
					},
				});
			},
			handleMobileLogin() {
				if (this.formData.mobile == "") {
					this.$refs.uToast.show({
						message: "手机号不能为空!",
						type: "error"
					});
					return;
				} else if (this.formData.password == "") {
					this.$refs.uToast.show({
						message: "密码不能为空!",
						type: "error"
					});
					return;
				}
				
				const params={
					mobile:this.formData.mobile,
					password:this.formData.password
				}
				
				post("/user/login",params).then(res=>{
					if(res.statusCode==200 && res.data.code){
						this.$refs.uToast.show({
							type: 'success',
							message: res.data.msg
						});
						uni.setStorageSync("mobile",params.mobile);
						//写入token登录信息
						uni.setStorageSync("token",res.data.token);
						uni.setStorageSync("userinfo",res.data.userinfo);
						setTimeout(function(){
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},300);
						
					}else{
						this.$refs.uToast.show({
							type: 'error',
							message: res.data.msg
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.p40 {
		padding: 40upx;
	}

	.logo {
		width: 80px;
	}
</style>